<template>
  <div>
    <div class="box">
      <img src="@/assets/authentication/人脸认证.png" alt="" />
      <p>正在验证...</p>
      <p>请勿离开页面</p>
    </div>
  </div>
</template>

<script>
import { H5RZentFind } from "@/utils";
export default {
  data() {
    return {
      times: 0,
      time: "",
      thirdPartyUserId: "",
      intervalID: null,
    };
  },
  mounted() {
    this.thirdPartyUserId = this.$route.query.thirdPartyUserId;
    this.setInterval();
  },
  methods: {
    async H5RZentFind() {
      let item = this.times++;
      if (item == 60) {
        clearInterval(this.intervalID);
        this.$router.push("/error");
        return;
      }
      let data = await H5RZentFind(this.thirdPartyUserId);
      if (data.data == true) {
        clearInterval(this.intervalID);
        setTimeout(() => {
          this.$router.push("/success");
        }, 500);
      } else if (data.data == false) {
        clearInterval(this.intervalID);
        setTimeout(() => {
          this.$router.push("/error");
        }, 500);
      }
    },
    // 定时器
    setInterval() {
      this.intervalID = setInterval(this.H5RZentFind, 1000);
    },
  },
};
</script>

<style lang="scss" scoped>
.box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  background-color: #fff;
}
.box img {
  margin-bottom: 20px;
}
.box p {
  margin-bottom: 6px;
}
</style>
